<template>
  <view class="tome-container">
    <!-- 图片区域 -->
    <image
        src="/static/tp/tp2.png"
        class="tome-image"
        width="100%"
        height="100%"
        mode="aspectFit"
    />

    <!-- 新增：白色区域与输入框 -->
    <view class="white-area">
      <view class="input-item">
        <text class="label">姓名：</text>
        <input type="text" class="input" placeholder="请输入姓名" />
      </view>
      <view class="input-item">
        <text class="label">学号：</text>
        <input type="text" class="input" placeholder="请输入学号" />
      </view>
    </view>

    <!-- 新增：底部跳转按钮 -->
    <button class="next-btn" @click="goToNextPage">
      进入下一页
    </button>
  </view>
</template>

<!-- 新增：脚本部分（处理按钮点击事件） -->
<script>
export default {
  methods: {
    // 按钮点击事件：跳转到目标页面（需替换为实际页面路径）
    goToNextPage() {
      uni.navigateTo({
        url: '/pages/index/shou_ye/di3'  // 示例路径，需根据实际页面修改
      });
    }
  }
};
</script>

<style scoped>
/* ... 原有样式保持不变 ... */

/* 新增：白色区域样式 */
.white-area {
  position: absolute;
  bottom: 200rpx;  /* 距离底部留出按钮空间 */
  width: 90%;
  padding: 30rpx;
  background-color: #fff;  /* 白色背景 */
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);  /* 轻微阴影 */
}

/* 新增：输入框样式 */
.input-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label {
  width: 120rpx;
  font-size: 28rpx;
}

.input {
  flex: 1;
  height: 60rpx;
  border: 1px solid #ddd;
  border-radius: 5rpx;
  padding: 0 15rpx;
  font-size: 28rpx;
}

/* 新增：底部按钮样式 */
.next-btn {
  position: absolute;
  bottom: 50rpx;  /* 固定在底部 */
  width: 90%;
  height: 80rpx;
  background-color: #007aff;  /* 蓝色按钮 */
  color: white;
  border-radius: 40rpx;
  font-size: 32rpx;
}
.tome-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.tome-image {  /* 样式选择器为 "tome-image"，需与图片 class 一致 */
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}
</style>